<template>
  <div class="warehouse-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <el-icon class="header-icon"><Box /></el-icon>
          <h1 class="page-title">总仓库管理</h1>
        </div>
        <div class="header-right">
          <span class="page-subtitle">仓库综合数据分析</span>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 统计卡片 -->
      <div class="stats-section">
        <el-card class="stats-card inbound-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-number">{{ totalInboundCount }}</div>
            <div class="stats-label">总入库数量</div>
          </div>
          <div class="stats-icon">
            <el-icon><ArrowDown /></el-icon>
          </div>
        </el-card>
        
        <el-card class="stats-card outbound-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-number">{{ totalOutboundCount }}</div>
            <div class="stats-label">总出库数量</div>
          </div>
          <div class="stats-icon">
            <el-icon><ArrowUp /></el-icon>
          </div>
        </el-card>
        
        <el-card class="stats-card stocktake-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-number">{{ totalStocktakeCount }}</div>
            <div class="stats-label">总盘点数量</div>
          </div>
          <div class="stats-icon">
            <el-icon><List /></el-icon>
          </div>
        </el-card>
        
        <el-card class="stats-card amount-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-number">¥{{ totalAmount }}</div>
            <div class="stats-label">总金额</div>
          </div>
          <div class="stats-icon">
            <el-icon><Money /></el-icon>
          </div>
        </el-card>
      </div>

      <!-- 图表卡片 -->
      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon><TrendCharts /></el-icon>
            <span>仓库数据图表</span>
          </div>
        </template>
        
        <div class="chart-container">
          <div ref="chartRef" class="chart" style="width: 100%; height: 400px;"></div>
        </div>
      </el-card>

      <!-- 数据表格卡片 -->
      <el-card class="table-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon><List /></el-icon>
            <span>仓库明细数据</span>
            <div class="header-actions">
              <el-button type="success" @click="handleExport()" class="export-btn">
                <el-icon><Download /></el-icon>
                导出
              </el-button>
              <el-button type="primary" @click="getdata()" class="refresh-btn">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
          </div>
        </template>
        
        <el-table 
          :data="tableData" 
          style="width: 100%"
          class="custom-table"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          :show-summary="true"
          :summary-method="getSummaries"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="warehouse_Name" label="序号" width="80">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="warehouse_Name" label="仓库名称" width="150" />
          <el-table-column prop="category_NameCount" label="货品种类" width="120" />
          <el-table-column prop="chuPrice" label="初期金额" width="120">
            <template #default="scope">
              <span class="amount-value">¥{{ scope.row.chuPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="moPrice" label="末期金额" width="120">
            <template #default="scope">
              <span class="amount-value">¥{{ scope.row.moPrice }}</span>
            </template>
          </el-table-column>
          
          <!-- 入库组 -->
          <el-table-column prop="ruwareCiCount" label="入库次数" width="100">
            <template #default="scope">
              <span class="inbound-count">{{ scope.row.ruwareCiCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ruwareCount" label="入库数量" width="100">
            <template #default="scope">
              <span class="inbound-count">{{ scope.row.ruwareCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ruwareprice" label="入库金额" width="120">
            <template #default="scope">
              <span class="inbound-amount">¥{{ scope.row.ruwareprice }}</span>
            </template>
          </el-table-column>
          
          <!-- 出库组 -->
          <el-table-column prop="chuwareCiCount" label="出库次数" width="100">
            <template #default="scope">
              <span class="outbound-count">{{ scope.row.chuwareCiCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="chuwareCount" label="出库数量" width="100">
            <template #default="scope">
              <span class="outbound-count">{{ scope.row.chuwareCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="chuwareprice" label="出库金额" width="120">
            <template #default="scope">
              <span class="outbound-amount">¥{{ scope.row.chuwareprice }}</span>
            </template>
          </el-table-column>
          
          <!-- 盘点组 -->
          <el-table-column prop="yingStocktakingciCount" label="盘点次数（盘盈）" width="120">
            <template #default="scope">
              <span class="stocktake-count">{{ scope.row.yingStocktakingciCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="yingStocktakingCount" label="盘点数量（盘盈）" width="120">
            <template #default="scope">
              <span class="stocktake-count">{{ scope.row.yingStocktakingCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="yingStocktakingPrice" label="盘点金额（盘盈）" width="120">
            <template #default="scope">
              <span class="stocktake-amount">¥{{ scope.row.yingStocktakingPrice }}</span>
            </template>
          </el-table-column>
          
          <!-- 盘亏组 -->
          <el-table-column prop="kuiStocktakingciCount" label="盘点次数（盘亏）" width="120">
            <template #default="scope">
              <span class="stocktake-loss-count">{{ scope.row.kuiStocktakingciCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="kuiStocktakingCount" label="盘点数量（盘亏）" width="120">
            <template #default="scope">
              <span class="stocktake-loss-count">{{ scope.row.kuiStocktakingCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="kuiStocktakingPrice" label="盘点金额（盘亏）" width="120">
            <template #default="scope">
              <span class="stocktake-loss-amount">¥{{ scope.row.kuiStocktakingPrice }}</span>
            </template>
          </el-table-column>
          
          <!-- 调拨组 -->
          <el-table-column prop="diaoRuwareciCount" label="调拨次数（调拨入库）" width="140">
            <template #default="scope">
              <span class="transfer-in-count">{{ scope.row.diaoRuwareciCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="diaoRuwareCount" label="调拨数量（调拨入库）" width="140">
            <template #default="scope">
              <span class="transfer-in-count">{{ scope.row.diaoRuwareCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="diaoRuwareprice" label="调拨金额（调拨入库）" width="140">
            <template #default="scope">
              <span class="transfer-in-amount">¥{{ scope.row.diaoRuwareprice }}</span>
            </template>
          </el-table-column>
          
          <el-table-column prop="diaoChuwareCiCount" label="调拨次数（调拨出库）" width="140">
            <template #default="scope">
              <span class="transfer-out-count">{{ scope.row.diaoChuwareCiCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="diaoChuwareCount" label="调拨数量（调拨出库）" width="140">
            <template #default="scope">
              <span class="transfer-out-count">{{ scope.row.diaoChuwareCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="diaoChuwareprice" label="调拨金额（调拨出库）" width="140">
            <template #default="scope">
              <span class="transfer-out-amount">¥{{ scope.row.diaoChuwareprice }}</span>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="page.PageIndex"
            v-model:page-size="page.PageSize"
            :page-sizes="[15, 20, 25, 30]"
            layout="total, sizes, prev, pager, next, jumper"
            prev-text="上一页"
            next-text="下一页"
            :total="page.totalCount"
            class="custom-pagination"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { reactive,onMounted, ref, watch, computed, nextTick } from 'vue'
import { BasicsRed } from '@/http/axiosHelper'
import { ElMessage, ElMessageBox } from 'element-plus'
import { BasicsWrite } from '@/http/axiosHelper'
import { useRouter } from 'vue-router'
import { statementRed } from '@/http/axiosHelper'
import { 
  Box, 
  Search, 
  Document, 
  Refresh, 
  ArrowDown, 
  ArrowUp, 
  Money, 
  List, 
  Download,
  Goods,
  User,
  UserFilled,
  Shop,
  TrendCharts
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'

const router=useRouter();
const dialogVisible = ref(false)
const chartRef = ref<HTMLElement>()
let chartInstance: echarts.ECharts | null = null

// 定义数据类型接口
interface WarehouseItem {
  warehouse_Name: string
  category_NameCount: number
  chuPrice: number
  moPrice: number
  ruwareCiCount: number
  ruwareCount: number
  ruwareprice: number
  chuwareCiCount: number
  chuwareCount: number
  chuwareprice: number
  yingStocktakingciCount: number
  yingStocktakingCount: number
  yingStocktakingPrice: number
  kuiStocktakingciCount: number
  kuiStocktakingCount: number
  kuiStocktakingPrice: number
  diaoRuwareciCount: number
  diaoRuwareCount: number
  diaoRuwareprice: number
  diaoChuwareCiCount: number
  diaoChuwareCount: number
  diaoChuwareprice: number
  [key: string]: any // 允许其他属性
}

// 首先定义所有的响应式数据
const tableData=ref<WarehouseItem[]>([]);
const page=reactive({
    PageIndex:1,
    PageSize:15,
    totalCount:0
})

const page2=reactive({
    PageIndex:1,
    PageSize:100,
    totalCount:0
})

const formInline = reactive({
  Warehouse_Code: '',
  Warehousing_Type: '',
  Warehouse_ID: null,
  Reviewer: '',
  Product_Name: '',
  Category_ID: null,
  Unit_ID: null,
  CreateTimeStartTime: null,
  CreateTimeEndTime: null,
  ReviewTimeStartTime: null,
  ReviewTimeEndTime: null,
  CreateUse: null,
  Department_ID: null,
})

// 其他ref定义
const unit=ref()
const ProductCategory=ref()
const deplarments=ref()
const deplarment=ref()

function formatDate(dateStr: string) {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  if (isNaN(date.getTime())) return dateStr;
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  return `${y}-${m}-${d}`;
}

// 计算总入库数量、总出库数量、总盘点数量和总金额
const totalInboundCount = computed(() => {
  return tableData.value
    .reduce((sum, item) => sum + (item.ruwareCount || 0), 0)
})

const totalOutboundCount = computed(() => {
  return tableData.value
    .reduce((sum, item) => sum + (item.chuwareCount || 0), 0)
})

const totalStocktakeCount = computed(() => {
  return tableData.value
    .reduce((sum, item) => sum + (item.yingStocktakingCount || 0) + (item.kuiStocktakingCount || 0), 0)
})

const totalAmount = computed(() => {
  return tableData.value
    .reduce((sum, item) => sum + (item.ruwareprice || 0) + (item.chuwareprice || 0) + (item.yingStocktakingPrice || 0) + (item.kuiStocktakingPrice || 0) + (item.diaoRuwareprice || 0) + (item.diaoChuwareprice || 0), 0)
    .toFixed(2)
})

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return
  
  chartInstance = echarts.init(chartRef.value)
  updateChart()
}

// 更新图表数据
const updateChart = () => {
  if (!chartInstance || !tableData.value.length) return

  const warehouseNames = tableData.value.map(item => item.warehouse_Name)
  const inboundQuantities = tableData.value.map(item => item.ruwareCount || 0)
  const outboundQuantities = tableData.value.map(item => item.chuwareCount || 0)

  const option = {
    title: {
      text: '仓库入库出库数据统计',
      left: 'center',
      textStyle: {
        color: '#2c3e50',
        fontSize: 18,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['入库数量', '出库数量'],
      top: 30
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: warehouseNames,
        axisPointer: {
          type: 'shadow'
        },
        axisLabel: {
          rotate: 45,
          color: '#666'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        min: 0,
        axisLabel: {
          formatter: '{value}',
          color: '#666'
        }
      }
    ],
    series: [
      {
        name: '入库数量',
        type: 'bar',
        data: inboundQuantities,
        itemStyle: {
          color: '#28a745'
        }
      },
      {
        name: '出库数量',
        type: 'bar',
        data: outboundQuantities,
        itemStyle: {
          color: '#667eea'
        }
      }
    ]
  }

  chartInstance.setOption(option)
}

// 表格汇总方法
const getSummaries = (param: any) => {
  const { columns, data } = param
  const sums: string[] = []
  columns.forEach((column: any, index: number) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    if (index === 1) {
      sums[index] = ''
      return
    }
    if (index === 2) {
      sums[index] = ''
      return
    }
    if (index === 3) {
      sums[index] = ''
      return
    }
    if (index === 4) {
      sums[index] = ''
      return
    }
    
    const values = data.map((item: any) => Number(item[column.property]))
    if (!values.every((value: number) => isNaN(value))) {
      sums[index] = values.reduce((prev: number, curr: number) => {
        const value = Number(curr)
        if (!isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0).toString()
    } else {
      sums[index] = ''
    }
  })
  return sums
}

const AddWarehouse=()=>
{
  router.push('/AddWarehouse')
}

const UpdateWarehouse=(id:any)=>
{
  router.push({path:"/UpdateWarehouse",query:{id:id}})
}

//产品单位下拉框
const unitdata=()=>
{
    statementRed.get("basicsread/api/Unit/GetUnitHandle",{params:{PageIndex:1,PageSize:100}}).then(res=>
        {
            unit.value=res.data.data
        }
    )
}

const ProductCategorydata=()=>
{
    statementRed.get("basicsread/api/ProductCategory/GetProductCategoryHandle",{params:{PageIndex:1,PageSize:100}}).then(res=>
        {
            ProductCategory.value=res.data.data
        }
    )
}

const delparmentdatas=()=>
{
    statementRed.get("basicsread/api/Deparment/GetDepartmentHandle",{params:{PageIndex:page.PageIndex,PageSize:page.PageSize}}).then(res=>
        {
            deplarment.value=res.data.data
        }
    )
}

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

// 导出函数（假设已配置 Axios 拦截器自动添加 Token）
async function handleExport() {
    try {
        // 1. 调用后端导出接口（GET 请求，参数通过 params 传递）
        const response = await BasicsRed({
            url: '/api/ZongWare/GetWarehouse_InExport', // 后端接口地址
            method: 'GET',
            params: {
                 PageIndex:page.PageIndex,
      PageSize:page.PageSize,
            }, // 对应后端 [FromQuery] 的 command 参数
            responseType: 'blob', // 关键：指定响应类型为二进制流（Excel 文件）
        });

        // 2. 从响应头获取文件名（后端通过 File 方法设置的 fileName）
        const fileName = getFileNameFromHeaders(response.headers);

        // 3. 生成下载链接并触发下载
        const blob = new Blob([response.data], {
            type: response.headers['content-type'] || 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = fileName; // 文件名从响应头获取或自定义
        document.body.appendChild(a);
        a.click();

        // 4. 清理资源
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);

        ElMessage.success('导出成功')

    } catch (error: any) {
        // 处理错误（如后端返回 401/400 等）
        console.error('导出失败：', error.response?.data || error.message);
        ElMessage.error('导出失败，请检查参数或重新登录');
    }
}

// 辅助函数：从响应头提取文件名（后端通过 File 方法设置）
function getFileNameFromHeaders(headers: any) {
    const contentDisposition = headers['content-disposition'] || headers['Content-Disposition'];
    if (!contentDisposition) return '总仓库管理.xlsx'; // 默认文件名

    // 解码文件名（处理中文编码问题）
    const match = contentDisposition.match(/filename\*?=([^;]+)/);
    if (match) {
        return decodeURIComponent(match[1].replace(/["']/g, ''));
    }
    return '总仓库管理.xlsx';
}

const getdata=()=>
{
    BasicsRed.get("http://localhost:5105/api/ZongWare/ZongcangkuHandle",{params:{
      PageIndex:page.PageIndex,
      PageSize:page.PageSize
    }}).then(res=>
        {
tableData.value=res.data.data
page.totalCount=res.data.totalCount
        }
    )
}

const delparmentdata=()=>
{
    BasicsRed.get("/api/Warehouse/GetWarehouseHandle",{params:{PageIndex:page2.PageIndex,PageSize:page2.PageSize}}).then(res=>
        {
            deplarment.value=res.data.data
        }
    )
}

const del=(id:any)=>
{
ElMessageBox.confirm(
    '确认删除吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
     statementRed.put("basicswrite/api/Warehouse/DelwarehouseHandle",{id:id}).then(res=>
{
   if(res.data.code==200)
   {
    ElMessage.success("删除成功");
    getdata();
   }
   else
   {
    ElMessage.success("删除失败");
   }
}
)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

// 监听器
watch(page,()=>
{
  getdata();
})

// 监听数据变化，更新图表
watch(tableData, () => {
  nextTick(() => {
    updateChart()
  })
}, { deep: true })

onMounted(()=>
{
    getdata();
    
    // 初始化图表
    nextTick(() => {
      initChart()
    })
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

<style scoped>
/* 主容器 */
.warehouse-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

/* 页面头部 */
.page-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px 32px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  font-size: 32px;
  color: #667eea;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  color: #6c757d;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  background: rgba(108, 117, 125, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(108, 117, 125, 0.2);
}

/* 主要内容区域 */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 统计卡片 */
.stats-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.stats-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stats-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.stats-content {
  padding: 24px;
  position: relative;
  z-index: 2;
}

.stats-number {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #2c3e50;
}

.stats-label {
  font-size: 14px;
  color: #2c3e50;
  font-weight: 500;
}

.stats-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  opacity: 0.2;
  color: #2c3e50;
}

.inbound-card {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.05), rgba(32, 201, 151, 0.05));
  border-left: 4px solid #28a745;
}

.inbound-card .stats-number {
  color: #28a745;
}

.inbound-card .stats-label {
  color: #2c3e50;
}

.outbound-card {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
  border-left: 4px solid #667eea;
}

.outbound-card .stats-number {
  color: #667eea;
}

.outbound-card .stats-label {
  color: #2c3e50;
}

.stocktake-card {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.05), rgba(255, 152, 0, 0.05));
  border-left: 4px solid #ffc107;
}

.stocktake-card .stats-number {
  color: #ffc107;
}

.stocktake-card .stats-label {
  color: #2c3e50;
}

.amount-card {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.05), rgba(255, 107, 107, 0.05));
  border-left: 4px solid #dc3545;
}

.amount-card .stats-number {
  color: #dc3545;
}

.amount-card .stats-label {
  color: #2c3e50;
}

/* 图表卡片 */
.chart-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.chart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.chart-container {
  padding: 20px;
}

.chart {
  border-radius: 8px;
  overflow: hidden;
}

/* 表格卡片 */
.table-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.table-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header .el-icon {
  font-size: 20px;
  color: #667eea;
  margin-right: 8px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.export-btn, .refresh-btn {
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.export-btn {
  background: linear-gradient(135deg, #28a745, #20c997);
  border: none;
}

.export-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.refresh-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
}

.refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 表格样式 */
.custom-table {
  border-radius: 8px;
  overflow: hidden;
}

.custom-table :deep(.el-table__header-wrapper) {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.custom-table :deep(.el-table__header) {
  color: #2c3e50;
  font-weight: 600;
}

.custom-table :deep(.el-table__body) {
  color: #2c3e50;
}

.custom-table :deep(.el-table__row) {
  color: #2c3e50;
}

.custom-table :deep(.el-table__footer) {
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  color: #856404;
  font-weight: 600;
}

/* 数据颜色样式 */
.amount-value {
  color: #dc3545;
  font-weight: 700;
}

.inbound-count {
  color: #28a745;
  font-weight: 600;
}

.inbound-amount {
  color: #28a745;
  font-weight: 700;
}

.outbound-count {
  color: #667eea;
  font-weight: 600;
}

.outbound-amount {
  color: #667eea;
  font-weight: 700;
}

.stocktake-count {
  color: #ffc107;
  font-weight: 600;
}

.stocktake-amount {
  color: #ffc107;
  font-weight: 700;
}

.stocktake-loss-count {
  color: #dc3545;
  font-weight: 600;
}

.stocktake-loss-amount {
  color: #dc3545;
  font-weight: 700;
}

.transfer-in-count {
  color: #17a2b8;
  font-weight: 600;
}

.transfer-in-amount {
  color: #17a2b8;
  font-weight: 700;
}

.transfer-out-count {
  color: #6f42c1;
  font-weight: 600;
}

.transfer-out-amount {
  color: #6f42c1;
  font-weight: 700;
}

/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 20px 0;
}

.custom-pagination {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 8px 16px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .warehouse-container {
    padding: 16px;
  }
  
  .stats-section {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .page-header {
    padding: 20px 24px;
  }
  
  .page-title {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .stats-section {
    grid-template-columns: 1fr;
  }
  
  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .export-btn, .refresh-btn {
    width: 100%;
  }
  
  .chart {
    height: 300px !important;
  }
}
</style>